//数据
var data = [
  {
    id: 1,
    fileNum: 012022000001,
    receiptNum: 20220704003,
    boxNum: " 1 - 1 - 2 - 001",
    user: "孙志元",
    receiptTime: "2022-8-24",
  },
  {
    id: 2,
    fileNum: 20220704002,
    receiptNum: 20220704004,
    boxNum: " 1 - 1 - 1 - 001",
    user: "孙志立",
    receiptTime: "2021-5-18",
  },
  {
    id: 3,
    fileNum: 20220704003,
    receiptNum: 20220704004,
    boxNum: " 1 - 1 - 1 - 001",
    user: "王阳阳",
    receiptTime: "2021-5-18",
  },
  {
    id: 4,
    fileNum: 20220704004,
    receiptNum: 20220704005,
    boxNum: " 1 - 1 - 1 - 001",
    user: "王国龙",
    receiptTime: "2021-5-18",
  },
  {
    id: 5,
    fileNum: 20220704005,
    receiptNum: 20220704006,
    boxNum: " 1 - 1 - 1 - 001",
    user: "王培",
    receiptTime: "2021-5-18",
  },
  {
    id: 6,
    fileNum: 20220704006,
    receiptNum: 20220704007,
    boxNum: " 1 - 1 - 1 - 001",
    user: "罗忠",
    receiptTime: "2021-5-18",
  },
  {
    id: 7,
    fileNum: 20220704007,
    receiptNum: 20220704008,
    boxNum: " 1 - 1 - 1 - 001",
    user: "郑姚",
    receiptTime: "2021-5-18",
  },
  {
    id: 8,
    fileNum: 20220704008,
    receiptNum: 20220704009,
    boxNum: " 1 - 1 - 1 - 001",
    user: "杜毅",
    receiptTime: "2021-5-18",
  },
  {
    id: 9,
    fileNum: 20220704009,
    receiptNum: 20220704010,
    boxNum: " 1 - 1 - 1 - 001",
    user: "崔强",
    receiptTime: "2021-5-18",
  },
  {
    id: 10,
    fileNum: 20220704010,
    receiptNum: 20220704011,
    boxNum: " 1 - 1 - 1 - 001",
    user: "曾岚",
    receiptTime: "2021-5-18",
  },
  {
    id: 11,
    fileNum: 20220704002,
    receiptNum: 20220704012,
    boxNum: " 1 - 1 - 1 - 001",
    user: "文崝",
    receiptTime: "2021-5-18",
  },
  {
    id: 12,
    fileNum: 20220704002,
    receiptNum: 20220704003,
    boxNum: " 1 - 1 - 1 - 001",
    user: "王智鹏",
    receiptTime: "2021-5-18",
  },
  {
    id: 13,
    fileNum: 20220704007,
    receiptNum: 20220704008,
    boxNum: " 1 - 1 - 1 - 001",
    user: "郑姚",
    receiptTime: "2021-5-18",
  },
  {
    id: 14,
    fileNum: 20220704008,
    receiptNum: 20220704009,
    boxNum: " 1 - 1 - 1 - 001",
    user: "杜毅",
    receiptTime: "2022-5-16",
  },
  {
    id: 15,
    fileNum: 20220704009,
    receiptNum: 20220704010,
    boxNum: " 1 - 1 - 1 - 001",
    user: "崔强",
    receiptTime: "2022-5-17",
  },
  {
    id: 16,
    fileNum: 20220704010,
    receiptNum: 20220704011,
    boxNum: " 1 - 2 - 1 - 001",
    user: "曾岚",
    receiptTime: "2022-5-18",
  },
  {
    id: 17,
    fileNum: 20220704002,
    receiptNum: 20220704012,
    boxNum: " 1 - 2 - 1 - 001",
    user: "文崝",
    receiptTime: "2022-5-20 ",
  },
  {
    id: 18,
    fileNum: 20220704002,
    receiptNum: 20220704003,
    boxNum: " 1 - 1 - 1 - 001",
    user: "王智鹏",
    receiptTime: "2022-5-21 ",
  },
];
//分页  当前的页码
var page = 1;
//每页
var count = 8;
//获取tbody
var oTBody = document.querySelector("tbody");
/*  data    
    1页  0-8   2页  9-16   n页  (n-1)*count  n*count 
    console.log(data.slice((page - 1) * count, page * count));
slice(data的0-8)把他们删除，返回的是删除的
 */
//获取分页容器 ul
var oPagination = document.querySelector(".pagination");

//获取上一页的按钮
var oPrevBtn = document.querySelector(".prev");
//获取下一页的按钮
var oNextBtn = document.querySelector(".next");

//获取搜索按钮
var oSearchBtn = document.querySelector(".searchBtn");
//入库时间
var oTimeBegin = document.querySelector("#timeBegin");
//出库时间
var oTimeEnd = document.querySelector("#timeEnd");
//获取收件编号
var oReceiptNum = document.querySelector("#receiptNum");
//获取入库员
var oUserNum = document.querySelector("#userNum");

//获取重置按钮
var oClearBtn = document.querySelector(".clearBtn");

//初始化页面数据
function render() {
  //搜索
  var str1 =
    oTimeBegin.value == ""
      ? new Date("1992-8-25").getTime()
      : new Date(oTimeBegin.value).getTime(); //开始时间
  var str2 =
    oTimeEnd.value == ""
      ? new Date().getTime()
      : new Date(oTimeEnd.value).getTime(); //结束时间
  var str3 = oReceiptNum.value;
  var str4 = oUserNum.value;
  //最终渲染
  var data1 = [];
  var data2 = [];
  var data3 = [];

  // console.log(oTimeBegin.value);
  // console.log(str1);
  // console.log(data);
  console.log(str1);
  console.log(str2);

  if (str1 == new Date("1992-8-25").getTime() || str2 == new Date().getTime()) {
    data1 = data;
  } else {
    for (var i = 0; i < data.length; i++) {
      var time = new Date(data[i].receiptTime).getTime();
      console.log(time);
      if (time >= str1 && time <= str2) {
        data1.push(data[i]);
      }
    }
  }

  console.log(data1);
  //判断第三个条件
  if (str3.trim() == "") {
    data2 = data1;
  } else {
    for (var i = 0; i < data1.length; i++) {
      if (data[i].boxNum.includes(str3)) {
        data2.push(data[i]);
      }
    }
  }

  //判断第四个条件
  console.log(data2);

  if (str4.trim() == "") {
    data3 = data2;
  } else {
    for (var i = 0; i < data2.length; i++) {
      if (data[i].user.includes(str4)) {
        data3.push(data[i]);
      }
    }
  }

  console.log(data1);
  console.log(data2);
  console.log(data3);

  oTBody.innerHTML = "";
  var renderArr = data3.slice((page - 1) * count, page * count);
  for (var i = 0; i < renderArr.length; i++) {
    var oTr = document.createElement("tr");
    oTr.innerHTML = ` <td>${renderArr[i].id}</td>
                <td>${renderArr[i].fileNum}</td>
                <td>${renderArr[i].receiptNum}</td>
                <td>${renderArr[i].boxNum}</td>
                <td>${renderArr[i].user}</td>
                <td>${renderArr[i].receiptTime}</td>
    `;
    oTBody.appendChild(oTr);
  }
  //渲染页码
  var aPageBtn = document.querySelectorAll(".pageBtn");
  for (var i = 0; i < aPageBtn.length; i++) {
    oPagination.removeChild(aPageBtn[i].parentNode);
  }
  for (var i = 1; i <= Math.ceil(data3.length / count); i++) {
    var oLi = document.createElement("li");
    oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
    if (i == page) {
      oLi.classList.add("active");
    }
    oPagination.insertBefore(oLi, oPagination.lastElementChild);
  }
}
render();

//给分页加事件
oPagination.addEventListener("click", changePage);
function changePage() {
  console.log(event.target);
  if (event.target.className == "pageBtn") {
    // //清楚所有样式
    // var aPageBtn = document.querySelectorAll(".pageBtn");
    // for (var i = 0; i < aPageBtn.length; i++) {
    //   aPageBtn[i].parentNode.classList.remove("active");
    // } //当前点击的加上active
    // event.target.parentNode.classList.add("active");
    page = event.target.innerText;
  }
  render();
}

//给上一页下页加事件
oPrevBtn.addEventListener("click", prev);
oNextBtn.addEventListener("click", next);
function prev() {
  if (page > 1) {
    page--;
    render();
  }
}
function next() {
  if (page < data.length / count) {
    page++;
    render();
  }
}

//搜索
oSearchBtn.addEventListener("click", searchFn);
function searchFn() {
  page = 1;
  render();
}

//重置
oClearBtn.addEventListener("click", clearFn);
function clearFn() {
  oTimeBegin.value = "";
  oTimeEnd.value = "";
  oReceiptNum.value = "";
  oUserNum.value = "";
  render();
  //最终渲染
}

// 左侧导航
// 左侧导航===========================================================================================
// 有子菜单的项（包括菜单项和子菜单列表）                        一级菜单有子菜单的li标签
let subMenus = document.querySelectorAll(".menus-submenu");
// 菜单项X                                                    一级菜单里的a标签
let subMenusItems = document.querySelectorAll(".menus-submenu > .menus-item");
// 子菜单列表                                                 二级菜单ul
let subMenusList = document.querySelectorAll(".menus-submenu > .menus-list");
// 没有子菜单的项                                              一级菜单没有子菜单的li标签
let noSubMenusItems = document.querySelectorAll(".menus-nosubmenu");
// 当前展开的菜单项索引
let expandedIndex = 0;
// 当前选择的 子菜单项 的 父菜单项 索引
let selectedParentIndex = 0;
// 当前选择的子菜单项索引
let selectedSubIndex = 0;
// 当前选择的 没有子菜单的项 的索引
let selectedNoIndex = -1;

function closeExpanded(index) {
  // 关闭展开
  subMenus[index].classList.remove("expanded-list");
}
function clearSelected() {
  // 清除选中项
  // 选中项有子菜单时
  if (-1 != selectedParentIndex) {
    subMenusList[selectedParentIndex]
      .getElementsByTagName("li")
      [selectedSubIndex].classList.remove("selected-items");
    subMenus[selectedParentIndex].classList.remove("selected-items");
  }
  // 选中项没有子菜单时
  else {
    noSubMenusItems[selectedNoIndex].classList.remove("selected-items");
  }
}
function initListeners() {
  // 点击响应：菜单项展开
  for (let index = 0; index < subMenusItems.length; index++) {
    subMenusItems[index].addEventListener("click", function (e) {
      // 当前点击的没有展开 并且 存在展开的, 关闭当前展开的
      if (index != expandedIndex && -1 != expandedIndex) {
        closeExpanded(expandedIndex);
      }

      // 判断点击的是否已经展开
      if (!subMenus[index].classList.toggle("expanded-list")) {
        // 点击的就是展开的，关闭展开
        expandedIndex = -1;
        // 选中的项 是否是当前点击的子项
        if (index == selectedParentIndex) {
          subMenus[index].classList.add("selected-items");
        }
      } else {
        // 点击的是其他
        expandedIndex = index;
        // 选中的项 是否是当前点击的子项
        if (index == selectedParentIndex) {
          subMenus[selectedParentIndex].classList.remove("selected-items");
        } else if (-1 != selectedParentIndex) {
          subMenus[selectedParentIndex].classList.add("selected-items");
        }
      }
    });
  }
  // 点击响应：子菜单项选中
  for (let index = 0; index < subMenusList.length; index++) {
    let subMenuLi = subMenusList[index].getElementsByTagName("li");
    for (let j = 0; j < subMenuLi.length; j++) {
      subMenuLi[j].addEventListener("click", function (e) {
        if (!subMenuLi[j].classList.contains("selected-items")) {
          // 清除选择
          clearSelected();

          subMenuLi[j].classList.add("selected-items");
          selectedParentIndex = index;
          selectedSubIndex = j;
        }
      });
    }
  }
  // 点击响应：无二级菜单的菜单项选中
  for (let index = 0; index < noSubMenusItems.length; index++) {
    noSubMenusItems[index].addEventListener("click", function (e) {
      if (!this.classList.contains("selected-items")) {
        // 清除选择
        clearSelected();
        // 如果有展开，关闭展开
        if (
          -1 != expandedIndex &&
          subMenus[expandedIndex].classList.contains("expanded-list")
        ) {
          closeExpanded(expandedIndex);
        }
        this.classList.add("selected-items");
        selectedNoIndex = index;
        selectedParentIndex = -1;
      }
    });
  }
}
initListeners();
